<template>
	<div class="filtrate-city">
			<el-select class="city-select" v-model="currentCityModel" size="small"
														@change="changeCity">
					<el-option
									v-for="item in cityListOption"
									:key="item.code"
									:label="item.name"
									:value="item.code"
									class="custom-select-option"
					/>
			</el-select>
	</div>
</template>

<script setup>
import {defineProps, watch, ref, defineEmits} from "vue";

const props = defineProps({
	cityList: {
			type: Array,
			default: () => []
	},
	currentCity: {
			type: String,
			default: ''
	}
})

const emit = defineEmits(['changeCity'])

const currentCityModel = ref('')
const cityListOption = ref([])

watch(
			() => props?.currentCity,
			(newVal) => {
					currentCityModel.value = newVal
			},
			{ immediate: true }
)

watch(
			() => props?.cityList,
			(newVal) => {
					const tempList = [...newVal]
					cityListOption.value = tempList
			},
			{ immediate: true }
)

const changeCity = (res) => {
	emit('changeCity', res)
}
</script>

<style scoped lang="less">
.filtrate-city {
	/deep/ .el-select__wrapper {
			background: #204485;
			.el-select__selected-item {
					color: white;
			}
	}
}
/deep/ .el-select__wrapper {
	background: #204485;
	box-shadow: inset 0px 0px 8px 0px #3D7FFF;
	border: 1px solid #67BAEF;
	.el-select__selected-item {
			color: white;
	}
}
/deep/ .el-select__wrapper.is-hovering {
	box-shadow: inset 0px 0px 8px 0px #3D7FFF;
	border: 1px solid #67BAEF;
}
.custom-select-option{
	color:#ffffff;
}
.custom-select-option.is-selected{
	color: #00e0ff;
}
.custom-select-option:hover{
	background:#368CF2;
}
</style>
